<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后代 子代选择器</title>
    <style>
      /* 后代选择器 选中div下所有的span元素*/
      div span {
        background-color: pink;
      }
      /* 直接子代选择器 选择div下的儿子span */
      div > span {
        background-color: green;
      }
      /* 多层子代：选中div下的儿子p，再选择p下的儿子span */
      div > p > span {
        color: orange;
      }
      /* 多层后代：选中div下的后代p，再选择p下的后代span */
      div p span {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <span>1</span>
    <div>
      <span>2</span>
      <p>
        <span>3</span>
        <!-- <div>
                <span>0</span>
            </div> -->
      </p>
      <span>4</span>
    </div>
  </body>
</html>
